<template>
  <div class="user">
    <div>
      <el-input class="search" v-model="input" placeholder="请输入分类名称"></el-input>
      <el-button class="search-btn" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button class="add-btn" icon="el-icon-plus" @click="$router.push('/typeAdd')">新增</el-button>
    </div>
    <div class="table">
       <el-table
        :data="tableData"
        border
        style="width: 100%">
       
       
        <el-table-column
          prop="z1"
          label="分类名称"
          >
        </el-table-column>
       
        <el-table-column
          width="150"
          label="操作"
        >
          <template  slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="changeUser(scope.row._id)"></el-button>
            <el-button type="danger" size="mini" @click="del(scope.row._id)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex flex-end mt15">
      <el-pagination
        layout="prev, pager, next"
        @current-change="change"
        :current-page="this.pn"
        :total="total"
        :page-size="ps"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      input: '',
      total: 0,  // 总共多少条数据  默认每页10条数据  15
      pn: 1, // 当前处于第几页
      ps: 5, // 每页展示几条数据
      tableData: []
    }
  },
  mounted () {
    // 函数的触发时机 就是一进入界面触发
    this.getData()
    
  },
  // 放置函数
  methods: {
    // 获取数据
    getData () {
      // 传递两个数据给后端，一个是当前页面，一个是展示几条数据
      axios.get(`/api/biao4list?pn=${this.pn}&ps=${this.ps}`).then(({data})=>{
        // console.log(data)
        this.tableData = data.data
        this.total = data.total
      })
    },
    change (current) {
      // console.log(current)  // 拿到页数之后  获取后端数据
      this.pn = current
      axios.get(`/api/biao4search?search=${this.input}&pn=${this.pn}&ps=${this.ps}`).then(({data})=>{
        this.tableData = data.data
        
        this.total = data.total
      })
    },
    search () {
      // 将输入框的文字 传递给后端
      this.pn = 1
      axios.get(`/api/biao4search?search=${this.input}&pn=${this.pn}&ps=${this.ps}`).then(({data})=>{
        this.tableData = data.data
        this.total = data.total
      })
    },
    del (id) {
      // console.log(id)
      // 请求后端删除接口，并将数据传递给后端
      axios.post('/api/biao4del',{
        id: id
      }).then(({data})=>{
        if (data.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000,
            onClose: ()=>{
              axios.get(`/api/biao4search?search=${this.input}&pn=${this.pn}&ps=${this.ps}`).then(({data})=>{
                this.tableData = data.data
                this.total = data.total
              })
            }
          })
        }
      })
    },
    changeUser (id) {
      this.$router.push('/typeChange?id='+id)
    }
  }
}
</script>

<style scoped>
.avatar{
  border-radius: 30px;
}
.table{
  margin-top: 15px;
}
.user{
  background: #fff;
  padding: 15px;
}
.search{
  width: 300px;
  margin-right: 5px;
}
.search >>> input:focus{
  border-color: #CAAAA3;
}
.search-btn{
  background: #CAAAA3;
  color: #fff;
  border-color: #CAAAA3;
}
.add-btn{
  background: #E8B5B1;
  color: #fff;
  border-color: #E8B5B1;
}

</style>